import React from 'react';
import createG2 from 'g2-react';

class DayCheck extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      height: 350,
      data: []
    };
  }
  componentWillReceiveProps(nextProps) {
    this.setState({
      data: nextProps.data || []
    });
  }
  render() {
    const Chart = createG2((chart) => {
      chart.col(
        'type', {
          alias: '种类 ',
        }
      );
      chart.axis('type', {
        title: null,
        line: {
          stroke: '#fff',
        },
        labels: {
          label: {
            fill: '#fff',
          },
        },
      });
      chart.col(
        'num', {
          alias: '合格率',
          tickCount: 6,
          min: 0,
          max: 100,
          formatter: function (val) {
            return val;
          },
        }
      );
      chart.axis('num', {
        title: {
          fontSize: '12',
          fill: '#ffffff',
        },
        grid: null,
        line: {
          stroke: '#fff',
        },
        labels: {
          label: {
            fill: '#fff',
          },
        },
      });
      chart.axis('num2', false);
      chart.col(
        'num2', {
          alias: '',
          tickCount: 6,
          min: 0,
          max: 100,
          formatter: function (val) {
            return val;
          },
        }
      );
      chart.legend(false);
      chart.interval().position('type*num').color('type', ['#67E38D']);
      chart.interval().position('type*num2').color('type', ['#F14E4E']);
      chart.render();
    });
    return (
      <div className="chart-wrap">
        <Chart
          data={this.state.data}
          width={500}
          height={420}
          forceFit
        />
        <div className="label-wrap">
          <div className="square">
            <span style={{ backgroundColor: '#67E38D' }} />
            正常
          </div>
          <div className="square">
            <span style={{ backgroundColor: '#F14E4E' }} />
            异常
          </div>
        </div>
      </div>
    );
  }
}

export default DayCheck;
